<template>
    <div>
        <div class="lead-content">
            <!--面包屑-->
            <div class="breadcrumb">
                <Breadcrumb>
                    <BreadcrumbItem to="/">首页111</BreadcrumbItem>
                    <BreadcrumbItem to="/components/breadcrumb">客户</BreadcrumbItem>
                    <BreadcrumbItem>销售</BreadcrumbItem>
                </Breadcrumb>
            </div>
            <!--筛选条件-->
            <div class="setScreensBody">
                <Tabs type="card" :animated="false" class="tabs" @on-click="changeTab">
                    <TabPane label="总KPI">
                    </TabPane>
                    <TabPane label="CC KPI"></TabPane>
                    <TabPane label="CR KPI"></TabPane>
                    <div class="setScreens">
                        <Poptip placement="bottom-end" width="305" v-model="visible">
                            <p class="setBtn"><i class="iconfont icon-shezhi1-copy"></i>筛选设置</p>
                            <div class="api chooseScreens" slot="content" ok-text="yes"
                                 cancel-text="no">
                                <p class="chooseTip">*设置要显示的筛选项*</p>
                                <CheckboxGroup v-model="checkAllGroup">
                                    <Checkbox label="香蕉香蕉"></Checkbox>
                                    <Checkbox label="苹果香蕉"></Checkbox>
                                    <Checkbox label="西瓜香蕉"></Checkbox>
                                    <Checkbox label="西香蕉"></Checkbox>
                                    <Checkbox label="西瓜2"></Checkbox>
                                    <Checkbox label="西瓜3"></Checkbox>
                                    <Checkbox label="西瓜4"></Checkbox>
                                    <Checkbox label="西瓜5"></Checkbox>
                                    <Checkbox label="西瓜6"></Checkbox>
                                    <Checkbox label="西瓜7"></Checkbox>
                                    <Checkbox label="苹果9"></Checkbox>
                                    <Checkbox label="西瓜10"></Checkbox>
                                    <Checkbox label="西瓜11"></Checkbox>
                                    <Checkbox label="西瓜12"></Checkbox>
                                    <Checkbox label="西瓜13"></Checkbox>
                                    <Checkbox label="西瓜14"></Checkbox>
                                    <Checkbox label="西瓜15"></Checkbox>
                                    <Checkbox label="西瓜16"></Checkbox>
                                    <Checkbox label="西瓜17"></Checkbox>
                                </CheckboxGroup>
                                <div class="clickBtn">
                                    <Button class="cancle" @click="close">取消</Button>
                                    <Button class="confirm" @click="ok" type="primary">确定</Button>
                                </div>
                            </div>
                        </Poptip>
                    </div>
                    <div class="allScreens" :class="{hidden:isHidden}">
                        <Form :model="formItem" :label-width="120" label-position="left">
                            <FormItem label="选择日期">
                                <DatePicker type="daterange" split-panels placeholder="   开始时间     至     结束时间"
                                            style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="下拉框单选">
                                <Select v-model="formItem.select" style="width: 200px">
                                    <Option value="beijing">New York</Option>
                                    <Option value="shanghai">London</Option>
                                    <Option value="shenzhen">Sydney</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="下拉框多选">
                                <Select v-model="formItem.select2" multiple style="width:200px">
                                    <Option value="beijing">New York</Option>
                                    <Option value="shanghai">London</Option>
                                    <Option value="shenzhen">Sydney</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="单选">
                                <RadioGroup v-model="formItem.radio">
                                    <Radio label="male">Male</Radio>
                                    <Radio label="female">Female</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="多选">
                                <Checkbox
                                        :indeterminate="indeterminate"
                                        :value="checkAll"
                                        @click.prevent.native="handleCheckAll">全选
                                </Checkbox>
                                <CheckboxGroup style="display: inline-block;" v-model="checkAllGroup"
                                               @on-change="checkAllGroupChange">
                                    <Checkbox label="香蕉"></Checkbox>
                                    <Checkbox label="苹果"></Checkbox>
                                    <Checkbox label="西瓜"></Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" class="submit">确认查询</Button>
                            </FormItem>
                        </Form>
                        <p class="fold">
                                <span @click="foldScreen">
                                    更多筛选
                                    <Icon type="ios-arrow-down"/>
                                </span>
                        </p>
                    </div>
                </Tabs>
            </div>
            <!--表格-->
            <div class="tableContent">
                <!--表格字段设置-->
                <div class="tableSetting">
                    <div class="dataOperate">
                        <p>已选<span class="num">{{selectedNum}}</span>条数据 ：</p>
                        <p v-if="selectedNum>0">
                            <Button>手动分配</Button>
                            <Button class="btn2">转回收站</Button>
                            <Button class="btn3">删除</Button>
                        </p>
                    </div>
                    <div class="sortTables">
                        <Select v-model="model1" style="width:120px">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label
                                }}
                            </Option>
                        </Select>
                        <Input style="width:180px" placeholder="请输入搜索内容"/>
                        <Button class="btn4"><i class="iconfont icon-sousuo"></i>搜索</Button>
                        <div class="setTables">
                            <Poptip placement="bottom-end" width="305" v-model="visible2">
                                <p class="setBtn"><i class="iconfont icon-shezhi1-copy"></i>字段设置</p>
                                <div class="api chooseScreens" slot="content" ok-text="yes"
                                     cancel-text="no">
                                    <p class="chooseTip">*设置要显示的字段*</p>
                                    <CheckboxGroup v-model="checkAllGroup">
                                        <Checkbox label="香蕉"></Checkbox>
                                        <Checkbox label="苹果"></Checkbox>
                                        <Checkbox label="西瓜"></Checkbox>
                                        <Checkbox label="西瓜1"></Checkbox>
                                        <Checkbox label="西瓜2"></Checkbox>
                                        <Checkbox label="西瓜3"></Checkbox>
                                        <Checkbox label="西瓜4"></Checkbox>
                                        <Checkbox label="西瓜5"></Checkbox>
                                        <Checkbox label="西瓜6"></Checkbox>
                                        <Checkbox label="西瓜7"></Checkbox>
                                        <Checkbox label="苹果9"></Checkbox>
                                        <Checkbox label="西瓜10"></Checkbox>
                                        <Checkbox label="西瓜11"></Checkbox>
                                        <Checkbox label="西瓜12"></Checkbox>
                                        <Checkbox label="西瓜13"></Checkbox>
                                        <Checkbox label="西瓜14"></Checkbox>
                                        <Checkbox label="西瓜15"></Checkbox>
                                        <Checkbox label="西瓜16"></Checkbox>
                                        <Checkbox label="西瓜17"></Checkbox>
                                    </CheckboxGroup>
                                    <div class="clickBtn">
                                        <Button class="cancle" @click="close2">取消</Button>
                                        <Button class="confirm" @click="ok2" type="primary">确定</Button>
                                    </div>
                                </div>
                            </Poptip>
                        </div>
                    </div>
                </div>
                <!--表格内容-->
                <Table class="tableData" @on-selection-change="selectChange" :columns="columns11" :data="data10"
                       border height="500"></Table>
                <!--分页-->
                <Page :total="100" show-sizer show-elevator/>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        filters: '',
        isHidden: false,
        selectedNum: 0,
        visible: false,
        visible2: false,
        formItem: {
          select: '',
          select2: '',
          radio: 'male',
          checkbox: [],
          date: '',
          time: ''
        },
        indeterminate: true,
        checkAll: false,
        checkAllGroup: [],
        columns11: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '分类',
            key: 'name',
            align: 'center',
            width: 200
          },
          {
            title: 'Other',
            align: 'center',
          },
          {
            title: 'Company',
            align: 'center',
          },
          {
            title: 'Gender',
            key: 'gender',
            align: 'center',
            width: 200
          }
        ],
        data10: [],
        cityList: [
          {
            value: 'New York',
            label: 'New York'
          },
          {
            value: 'London',
            label: 'London'
          },
          {
            value: 'Sydney',
            label: 'Sydney'
          },
          {
            value: 'Ottawa',
            label: 'Ottawa'
          },
          {
            value: 'Paris',
            label: 'Paris'
          },
          {
            value: 'Canberra',
            label: 'Canberra'
          }
        ],
        model1: ''
      }
    },
    mounted() {

      console.log(2222222);
      this.axios.get('http://172.16.10.35:8002/api/config/leads/fields/filters').then(res => {
        this.filters = res.data.data.filters;
        console.log(this.filters);
      });
      const data = [];
      for (let i = 0; i < 20; i++) {
        data.push({
          key: i,
          name: 'John Brown',
          age: i + 1,
          street: 'Lake Park',
          building: 'C',
          door: 2035,
          caddress: 'Lake Street 42',
          cname: 'SoftLake Co',
          gender: 'M'
        })
      }
      this.data10 = data
    },
    methods: {
      //切换tab
      changeTab(name) {
        console.log(name);
      },
      //折叠隐藏面板
      foldScreen() {
        this.isHidden = !this.isHidden;
        console.log(this.isHidden);
      },
      //table选中checkBox
      selectChange(selection) {
        // console.log(selection.length);
        this.selectedNum = selection.length;
      },
      handleCheckAll() {
        if (this.indeterminate) {
          this.checkAll = false;
        } else {
          this.checkAll = !this.checkAll;
        }
        this.indeterminate = false;
        if (this.checkAll) {
          this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
        } else {
          this.checkAllGroup = [];
        }
      },
      checkAllGroupChange(data) {
        if (data.length === 3) {
          this.indeterminate = false;
          this.checkAll = true;
        } else if (data.length > 0) {
          this.indeterminate = true;
          this.checkAll = false;
        } else {
          this.indeterminate = false;
          this.checkAll = false;
        }
      },
      ok() {
        this.visible = false
        this.$Message.info('You click ok');
      },
      close() {
        this.visible = false
      },
      ok2() {
        this.visible2 = false
        this.$Message.info('You click ok')
      },
      close2() {
        this.visible2 = false
      }
    },
    components: {},
  }
</script>
<style lang="less" scoped>
    /*@import "../../assets/css/standard";*/


</style>
